<template>
    <div class="icons">

 <swiper class="swiper-ii" ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for='item in page' :key="item.id">
           <div class="icons-item" v-for="page2 in item" :key="page2.id">
           <img :src='page2.imgurl'>
           <p>
            {{page2.title}}
           </p>
       </div>
      </swiper-slide>
 <div class="swiper-pagination" slot="pagination"></div>
    

       </swiper>

     
        
 
    </div>
</template>
<style scoped lang='stylus'>
@import '~css/var.styl'
 .icons >>> .swiper-pagination-bullet-active{
        background:$bgcolor;

    }
    .swiper-pagination{
        bottom:0px;
    }
.icons{
    width :100%;
    background-color:#fff;
    
    
}
.swiper-ii{
    height:3.8rem;
}
.icons-item{
    width:25%;
    padding-bottom:25%;
    height:0px;
    float :left;
   

   
  
}
.icons-item img{
width 1.1em;
height 1.1em;
display:block;
margin :0 auto;
padding-top :.2rem;
border-radius :50%;

}
.icons-item p{

font-size:.28rem;
text-align:center;
margin-top :.01rem;


}
</style>
<script>

export default {
    props:['iconslist'],
    data(){
        return{
          
            swiperOptions:{
                  pagination: {
            el: '.swiper-pagination'
          }
            }
           
            
        }
    },
    computed:{
              
                  page(){
                    
                 let pages=[];
                this.iconslist.forEach((item,index) => {
                    let idx=Math.floor(index/8);
                    if(!pages[idx]) pages[idx]=[];
                        pages[idx].push(item)

                    
                })
                return pages;
                  }
                 
        
            }
}
</script>